<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Admin</title>
    <style type="text/css" media="screen">
        @import "resources/css/custom-theme/jquery-ui-1.8.16.custom.css";
        @import "resources/css/screen.css";
        @import "resources/css/app.css";

        .dataTables_info {
            padding-top: 0;
        }

        .dataTables_paginate {
            padding-top: 0;
        }

        .css_right {
            float: right;
        }

        #example_wrapper .fg-toolbar {
            font-size: 0.8em
        }

        #theme_links span {
            float: left;
            padding: 2px 10px;
        }
    </style>
    <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                oTable = $('#racetable').dataTable({
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "admin",
                    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                        $('td:eq(3)', nRow).html( '<button id="delete'+aData[3]+'" onclick="deleteRace('+aData[3]+')">DELETE</button>' );
                        return nRow;
                    }
                });

            $(":button.task").button().click(function () {
                var row = $(this).parent().parent();
                if (confirm("are you sure")) {
                    $.post("admin", {task:this.id})
                            .success(function () {
                                alert("Completed");
                            })
                            .error(function (resp) {
                                alert("error running task" + resp);
                            });
                }
            });
        });

        function deleteRace(raceId) {
            $.post("admin", {task:"DeleteRaceAndResultsTask",raceid:raceId})
                .success(function() {
                        $("#delete"+raceId).parent().parent().remove();
                        alert("Deleted")
                    })
                    .error(function (resp) {
                        alert("error running task" + resp);
                    });
        }
    </script>
</head>
<body>
<div class="container">
    <c:forEach var="task" items="${tasks}">
        <button class="task" id="${task.taskName}">${task.uiName}</button>
    </c:forEach>

    <div id="tablecontainer" class="span-22 push-1">
        <table id="racetable">
            <thead>
            <tr>
                <th>Date</th>
                <th>Race</th>
                <th>Distance</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
